<template>
  <van-overlay :show="val.loading_show">
    <div class="wrapper">
      <div class="ldmain">
        <van-loading vertical>
          <template #icon>
            <van-icon name="star-o" size="30" />
          </template>
          {{ val.loading_text ?? "val.loading_text" }}
        </van-loading>
      </div>
    </div>
  </van-overlay>
  <div class="stitle">· 必填类型 ·</div>

  <div class="_box0">
    <n-grid
      x-gap="8"
      y-gap="8"
      :cols="parseInt(cfg.sswd / 350) >= 2 ? 2 : parseInt(cfg.sswd / 350)"
    >
      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>史王属性：</div>
          </div>
          <div class="_2_val">
            <div class="_3_div">
              <n-flex class="tyflex">
                <template v-for="item in val.sslist">
                  <n-button
                    size="small"
                    @click="val.up_click.ss = item"
                    :type="val.up_click.ss == item ? 'gt_btn_act' : 'gt_btn'"
                    ><img
                      height="13"
                      class="team_ss_icon"
                      style="margin-right: 5px"
                      :src="val.img[item]"
                    />{{ val.toslmname[item] }}史莱姆国王</n-button
                  >
                </template>
              </n-flex>
            </div>
          </div>
        </div>
      </n-gi>
      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>异常类型：</div>
          </div>
          <div class="_2_val">
            <div class="_3_div">
              <n-flex class="tyflex">
                <template v-for="item in val.yclist">
                  <n-button
                    size="small"
                    @click="val.up_click.yc = item"
                    :type="val.up_click.yc == item ? 'gt_btn_act' : 'gt_btn'"
                    ><img
                      height="13"
                      class="team_ss_icon"
                      style="margin-right: 5px"
                      :src="val.img[item]"
                    />弱{{ item }}</n-button
                  >
                </template>
              </n-flex>
            </div>
          </div>
        </div>
      </n-gi>
      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>作业分数：</div>
          </div>
          <div class="_2_val">
            <n-input-number
              clearable
              v-model:value="val.up_click.score"
              placeholder="请输入本次分数"
            />
          </div>
        </div>
      </n-gi>
      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>作者名称：</div>
          </div>
          <div class="_2_val">
            <n-input
              clearable
              v-model:value="val.up_click.by"
              placeholder="请输入作者名称"
            />
          </div>
        </div>
      </n-gi>
      <n-gi span="2">
        <div
          style="
            background-color: var(--banr-bg);
            padding: 10px 8px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-direction: column;
          "
        >
          <m-role
            :ban="['ghz']"
            :maxlimit="4"
            :data="val.up_click.role"
            :listname="['主控位', '二号位', '三号位', '四号位']"
          ></m-role>
        </div>
      </n-gi>
    </n-grid>
  </div>
  <div class="stitle">· 选填内容 ·</div>
  <div class="_box0">
    <n-grid
      x-gap="8"
      y-gap="8"
      :cols="parseInt(cfg.sswd / 350) >= 2 ? 2 : parseInt(cfg.sswd / 350)"
    >
      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>要求倍速：</div>
          </div>
          <div class="_2_val">
            <div class="_3_div">
              <n-flex class="tyflex">
                <template v-for="item in val.bslist">
                  <n-button
                    size="small"
                    @click="val.up_click.bs = item"
                    :type="val.up_click.bs == item ? 'gt_btn_act' : 'gt_btn'"
                    ><img
                      height="13"
                      class="team_ss_icon"
                      style="margin-right: 5px"
                      :src="val.img[item]"
                    />{{ item }}</n-button
                  >
                </template>
              </n-flex>
            </div>
          </div>
        </div>
      </n-gi>
      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>主控CD %：</div>
          </div>
          <div class="_2_val">
            <n-input
              v-model:value="val.up_click.cdr"
              placeholder="特殊CD请填写，留空无要求"
            ></n-input>
          </div>
        </div>
      </n-gi>
      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>锁帧帧数：</div>
          </div>
          <div class="_2_val">
            <n-input
              v-model:value="val.up_click.fps"
              placeholder="特殊帧数请填写，留空无要求"
            ></n-input>
          </div>
        </div>
      </n-gi>
      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>视频地址：</div>
          </div>
          <div class="_2_val">
            <n-input
              v-model:value="val.up_click.video"
              placeholder="请输入地址"
            ></n-input>
          </div>
        </div>
      </n-gi>
      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>说明文本：</div>
          </div>
          <div class="_2_val">
            <n-input
              type="textarea"
              :size="cfg.sizebtn"
              style="min-height: 150px"
              v-model:value="val.up_click.tipstext"
              placeholder="请填写作业说明内容：比如主控CD要多少 防御要求
                              "
            ></n-input>
          </div>
        </div>
      </n-gi>

      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>分数截图：</div>
            <div class="_2_tips" v-if="val.fc_obj.uploading == false">提交编辑后生效</div>
            <div class="_2_tips" v-if="val.fc_obj.uploading == true">
              上传中 {{ val.fc_obj.pt }}%
            </div>
          </div>
          <div class="_2_val">
            <n-upload
              directory-dnd
              list-type="image-card"
              :action="`${cfg.api}upload`"
              :data="{ ...cfg.user }"
              :max="1"
              response-type="json"
              @change="
                ({ file, fileList, event }) =>
                  set.updimg_change({ file, fileList, event, obj: val.fc_obj })
              "
              @finish="
                ({ file, event }) =>
                  cfg.updfinish({
                    file,
                    event,
                    run: set.updimg_fen,
                  })
              "
            >
            </n-upload>
          </div>
        </div>
      </n-gi>

      <n-gi span="2">
        <div class="_banr">
          <div class="_2_title2" style="width: 100px">
            <div>装备截图：</div>
            <div class="_2_tips" v-if="val.it_obj.uploading == false">提交编辑后生效</div>
            <div class="_2_tips" v-if="val.it_obj.uploading == true">
              上传中 {{ val.it_obj.pt }}%
            </div>
          </div>
          <div class="_2_val">
            <n-upload
              directory-dnd
              list-type="image-card"
              :action="`${cfg.api}upload`"
              :data="{ ...cfg.user }"
              :max="1"
              response-type="json"
              @change="
                ({ file, fileList, event }) =>
                  set.updimg_change({ file, fileList, event, obj: val.it_obj })
              "
              @finish="
                ({ file, event }) =>
                  cfg.updfinish({
                    file,
                    event,
                    run: set.updimg_zb,
                  })
              "
            >
            </n-upload>
          </div>
        </div>
      </n-gi>
    </n-grid>
  </div>
</template>
<script>
import { cfg } from "@/cfg/cfg.js";
export default {
  props: {
    val: {},
    comp: {},
    set: {},
  },
  setup(props) {
    let val = props.val;
    let set = props.set;
    val.up_role = false;
    val.up_click.bs = "无要求";
    val.up_click.role = [];
    val.up_click.fc_file = {};
    val.new_img1 = undefined;
    val.new_img2 = undefined;
    val.up_click.it_file = {};
    val.off = () => {
      val.up_role = false;
    };
    val.grid = {
      left: "24 400:6 600:5",
      right: "24 400:18 600:19",
    };
    val.toslmname = {
      虚: "原初",
      光: "光辉",
      暗: "黑暗",
      火: "熔岩",
      水: "深海",
      土: "绿茵",
      宇宙史: "宇宙",
    };
    val.uprole = async () => {
      try {
        val.loading_show = true;
        val.loading_text = "上传处理中...";

        if (val.it_obj.uploading == true) {
          throw { code: -1, message: "请等待装备图片上传" };
        }

        if (val.fc_obj.uploading == true) {
          throw { code: -1, message: "请等待分数图片上传" };
        }

        const back = await cfg.mpost({
          url: `${cfg.url2}api/dljjc`,
          query: {
            type: "new",

            user: {
              uid: cfg.user?.uid,
              authkey: cfg.user?.authkey,
              token: cfg.user?.token,
            },
          },
          post: {
            data: {
              ...val.up_click,
              img1: val.new_img1,
              img2: val.new_img2,
            },
          },
        });

        if (back.code == -1) {
          throw { code: -1, message: back.msg };
        } else {
          await set.get_svinfo(true);
          val.get_work_list();
          val.md_up = false;
        }

        val.loading_show = false;
      } catch (error) {
        val.loading_show = false;
        cfg.alert3({
          message: `${error.message}`,
          closeOnClickOverlay: true,
        });
      }
      return;
    };
    val.avaselect = (item) => {
      const icon = item.icon;
      //检查val.up_click.role数组有没有跟item.icon相同的字符串 有的话不进行push
      //检查数组是否大于4个
      if (val.up_click.role.length >= 4) {
        return;
      }
      val.up_click.role = val.up_click.role.filter((i) => i !== icon);
      //删除数组中的item 并保持数组顺序 如果删除key2 则在key2中插入
      val.up_click.role.push(icon);
    };
    val.unsetava = (item) => {
      //删除数组中的item 并保持数组顺序 如果删除key2 则在key2中插入
      val.up_click.role = val.up_click.role.filter((i) => i !== item);
    };

    return {
      cfg,
    };
  },
};
</script>
